<template>
  <div class="Index">
    <van-tabs :active="activeNav" @change="handleNavChange" sticky swipeable >
      <van-tab v-for="item in types" :key="item.value" :name="item.value" :title="item.name">
        <ListPanel :type="item.value" :activeNav="activeNav" :keyword="keyword" :reachBottomTime="reachBottomTime" :pullDownRefreshTime="pullDownRefreshTime" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import ListPanel from './ListPanel'
import api from '@/api'

export default {
  components: {
    ListPanel,
  },
  data () {
    return {
      activeNav: '',
      reachBottomTime: Date.now(),
      pullDownRefreshTime: Date.now(),
      types: [],
      keyword: '',
    }
  },
  onLoad (option) {
    this.activeNav = option.activeNav
  },
  onReachBottom () {
    this.reachBottomTime = Date.now()
  },
  onPullDownRefresh () {
    this.pullDownRefreshTime = Date.now()
  },
  created () {
    this.getTypes()
  },
  methods: {
    async getTypes () {
      const { result } = await api.getDict({ type: 'learn_type' })
      this.types = result.map(item => { item.value = String(item.id); return item })
      if (!this.activeNav) {
        this.activeNav = this.types[0].value
      }
    },
    handleNavChange (e) {
      this.activeNav = e.detail.name
    },
  },
}
</script>
